import { INPUT_CONSTRAINTS } from '@/pages/workflow/components/InspectData'
import { variableTypeOptions } from '@/pages/workflow/constants'
import { Checkbox, Input, Select } from 'antd'
import { produce } from 'immer'
import type { FC } from 'react'
import React, { useCallback } from 'react'
import { InputVar, MoreInfo } from '../../types'

type Props = {
  readonly: boolean
  payload: InputVar
  onChange?: (item: InputVar, moreInfo?: MoreInfo) => void
  onRemove?: () => void
  rightContent?: JSX.Element
  varKeys?: string[]
  itemIndex: number
}

const ParamItem: FC<Props> = ({
  readonly,
  payload,
  itemIndex,
  onChange = () => {},
  onRemove = () => {},
  rightContent,
  varKeys = []
}) => {
  const handlePayloadChange = useCallback(
    (key: string) => {
      return (value: any) => {
        const newPayload = produce(payload, draft => {
          draft[key] = value
        })
        onChange(newPayload, undefined)
      }
    },
    [payload, onChange]
  )
  return (
    <div className="mt-[8px] flex">
      <Input className='mr-1'
        value={payload.variable}
        //disabled={itemIndex === 0}
        placeholder="输入变量名"
        style={{ width: '25%' }}
        onChange={e => {
          const newValue = e.target.value
          if (
            newValue.length <= INPUT_CONSTRAINTS.NAME_MAX_LENGTH &&
            (newValue === '' || /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(newValue))
          ) {
            handlePayloadChange('variable')(newValue)
          }
        }}
        draggable="false"
      />
      <Select className='mr-1'
        defaultValue={payload.type}
        placeholder="变量类型"
        //disabled={itemIndex === 0}
        placement="bottomLeft"
        style={{ width: '25%', pointerEvents: 'auto'}}
        onChange={val => handlePayloadChange('type')(val)}
        options={variableTypeOptions}
        popupClassName='custom-select-dropdown'
      ></Select>
      <Input
        value={payload.label}
        placeholder="输入变量描述信息"
        //disabled={itemIndex === 0}
        style={{ width: '30%' }}
        maxLength={INPUT_CONSTRAINTS.DESCRIPTION_MAX_LENGTH}
        onChange={e => handlePayloadChange('label')(e.target.value)}
      /> 
      <div className="flex items-center justify-center" style={{ width: '12%' }}>
        <div>
          <Checkbox
            defaultChecked={payload.required}
            //disabled={itemIndex === -1}
            style={{ width: '6%' }}
            onChange={e => handlePayloadChange('required')(e.target.checked)}
          ></Checkbox>
        </div>
      </div>
      {itemIndex >= 0 && (
        <div
          onClick={onRemove}
          className="flex cursor-pointer items-center justify-center text-[#888d92]"
          style={{ width: '6%' }}
        >
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24">
            <path
              fill="currentColor"
              d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 2C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11ZM8 12a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H9a1 1 0 0 1-1-1Z"
            ></path>
          </svg>
        </div>
      )}
    </div>
  )
}

export default React.memo(ParamItem)
